<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 1000px;
			height: 200px;
			background-color: pink;
		}
		.content div{
			width: 200px;
			height: 200px;
			float: left;
/*			左浮动*/
		}
		.content div:nth-of-type(1){
			background-color: red;
		}
		.content div:nth-of-type(2){
			background-color: blue;
			float: right;
		}
		.content div:nth-of-type(3){
			background-color: green;
		}
		.content span{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			float: left;
		}


		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
		.two{
			width: 400px;
			height: 200px;
			background-color: blue;
		}
	</style>
	<title></title>
</head>
<body>
	<!-- one使用了浮动  脱标 -->
	<div class="one"></div>
	<!-- two是普通div  也就是标准文档流 -->
	<div class="two"></div>

	<!-- dispaly:inline-block -->
	<!-- 有缝隙 -->

	<!-- 浮动是一种布局方式 通过属性 float 来实现 -->

<!-- 	<div class="content">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<span>4</span> -->
		<!-- 注意 如果同级中有元素使用了浮动 那么 他的兄弟也应该设置浮动 -->
	</div>
<!-- 		<1.浮动的元素不能有效的撑开父级的高度
			解决：给父级设置 高度
				解决浮动带来的问题（伪元素清除法）
		2.浮动回导致 脱离标准文档流   不管是用的什么标签 如果使用浮动他就会脱离原来的规则 也就是 原本不能设置的也能设置了 
		（脱离标准文档流的元素有 点像行内块 但是不是）
		简称：脱标
		3. 解决浮动带来的问题（伪元素清除法）-->

</body>
</html>